<template>
  <div>
    <el-autocomplete
      class="inline-input wid220"
      v-model="name"
      clearable
      @clear="Clear()"
      ref="searchSelect"
      :fetch-suggestions="
        (queryString, cb) => {
          querySearchAsync(queryString, cb);
        }
      "
      :placeholder="placeholder"
      @select="
        (item) => {
          handleSelect(item);
        }
      "
      ><template slot-scope="{ item }">
        {{ item.name }}
      </template></el-autocomplete
    >
  </div>
  <!-- :trigger-on-focus="true" -->
</template>

<script>
import { process_getFormula } from "@/api/sorting/processOrder";
export default {
  props: {
    placeholder: {
      type: String,
      default: "商品名称/助记码/编码",
    },
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      let data = Object.assign({ name: queryString.trim() });
      process_getFormula(data).then((res) => {
        if (res.errcode == 0) {
          let result = res.data.list;
          cb(result);
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    handleSelect(item) {
      this.name = item.name;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    focus() {
      this.$refs["searchSelect"].focus();
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: initial;
  padding: 0 0;
  height: 40px;
  .code {
    color: #999;
  }
}
</style>